<template>
  <div v-loading="loading" class="gl_my_15">
    <div>
      <p class="title" @click="changeRoute(competition.route)">{{ competition.name }}</p>
      <p v-if="competition.startTime" class="gl_mt_15">比赛开始时间：{{ competition.startTime | FormatDate('yyyy-MM-dd') }}</p>
    </div>
    <el-tabs v-model="activeName" type="card" class="gl_mt_30">
      <el-tab-pane label="个人报项单" name="person">
        <Person :competition="competition" />
      </el-tab-pane>
      <el-tab-pane label="团队报项单" name="group">
        <Group :competition="competition" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Person from './person';
import Group from './group';
import {
  api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalSummaryCompetitionId // 赛事信息
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'ReportDetail',
  components: {
    Group,
    Person
  },
  data() {
    return {
      loading: false,
      activeName: 'group',
      tabPosition: 'remote',
      gameId: '',
      competition: {} // 赛事信息
    };
  },
  created() {
    this.gameId = this.$route.query.id;
    this.getTitle();
  },
  methods: {
    // 获取赛事信息
    getTitle() {
      this.loading = true;
      api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalSummaryCompetitionId(this.gameId).then(res => {
        this.competition = res.competition;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 点击赛事标题进行路由跳转
    changeRoute(route) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = `${location.origin}/game.html#/home/${route}/info`;
      a.target = '_blank';
      a.dispatchEvent(event);
    }
  }
};
</script>

<style scoped>
p {
  text-align: center;
  font-size: 14px;
  color: #353434;
}
.title {
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.title:hover{
  color: #1890ff;
  text-decoration: underline;
}
</style>
